import React, {useLayoutEffect, useState} from 'react';
import anime from 'animejs'
import {Button} from "antd";
import styles from './index.less';
import classnames from "classnames";

const LeakyPreloader: React.FC = () => {

  const [animationRef, setAnimationRef] = useState<ReturnType<typeof anime> | undefined>();

  useLayoutEffect(() => {
    setAnimationRef(
      anime({
        targets: '.box',
        translateX: 250,
        easing: 'linear',
        direction: 'alternate',
        autoplay: false,
        loop: true
      }),
    );
  }, []); // Only run once.

  const [onOff, setOnOff] = useState<boolean>(true)

  const testAnime = () => {
    setOnOff(!onOff)
    if (onOff) {
      animationRef.play();
    } else {
      animationRef.pause();
    }

  }

  return (
    <div>
      <div>
        <Button onClick={testAnime}>click me</Button>

        <div className={classnames(styles.box, "box")}>look me</div>
      </div>
    </div>
  );


};

export default LeakyPreloader;
